<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        body > .el-container {
            height: 100%
        }

        .menu {
            height: 100%;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-main {
            background-color: #fbfdff;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        .el-radio-group {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            font-size: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="margin: 0px !important;">
        <el-aside
                style="background: white !important;height:100vh !important;width:30%;border: 0px solid #ccc; border-radius: 16px;">
            <div class="custom-tree-container">
                <div class="block">
                    <!--                    show-checkbox-->
                    <el-tree
                            check-strictly
                            ref="tree"
                            :data="data"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            :default-checked-keys='defaultCheck'
                            :props="defaultProps"
                            @check="currentChecked">
                    </el-tree>
                </div>
            </div>
        </el-aside>
        <!--<div style="border: 1px solid #ccc; border-radius: 16px;width: 100%;height: 100%">-->
        <el-main style="border: 1px solid #ccc; border-radius: 16px;">
            <el-form disabled :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                     style="font-weight: bold">
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="id">
                            <el-input disabled v-model="roleMsg.id" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="roleMsg.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="创建时间">
                            <!--                            <el-input disabled v-model="roleMsg.createDate" readonly></el-input>-->
                            <el-date-picker type="date" placeholder="选择日期" v-model="roleMsg.createDate"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="是否可用">
                            <el-switch v-model="roleMsg.flag"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col>
                        <el-form-item label="备注" prop="name">
                            <el-input type="textarea" v-model="roleMsg.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <!--                <el-form-item>
                                    <el-button v-if="ruleForm.id==null" type="primary" @click="submitForm('save')">创建</el-button>
                                    <el-button v-else type="success" @click="submitForm('update')">更新</el-button>
                &lt;!&ndash;                    <el-button @click="resetForm('ruleForm')">重置</el-button>&ndash;&gt;
                                </el-form-item>-->
            </el-form>
        </el-main>
        <!--</div>-->
    </el-container>

<!--    <el-footer slot="footer" class="dialog-footer">
        <el-button>hahha</el-button>
    </el-footer>-->
</div>
</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &lt;!&ndash;vue要放在element ui前面&ndash;&gt;-->
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script language='javascript' th:inline="javascript">
    let selKey = [];
    let roleId = [[${roleId}]]
    new Vue({
        el: '#app',
        data: function () {
            return {
                roleMsg: {},
                roleId: [[${roleId}]],
                defaultCheck: [],
                ruleForm: {},
                rules: {},
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    id: 'id'
                }
            }
        },
        created() {
            this.init()
        },
        watch: {},
        mounted(){
            // 将Vue方法传到全局对象window中
            window.eleMsg = this.eleMsg
        },
        methods: {
            eleMsg(code,msg){
                if (code ==20000){
                   this.$message({
                        showClose: true,
                        message: msg,
                        type: 'success'
                    });}
            },
            currentChecked(nodeObj, SelectedObj) {
                const node = this.$refs.tree.getNode(nodeObj.id);
                this.setNode(node);
                // console.log(SelectedObj)
                // console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
                // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
                // console.log('所有选择的节点',this.$refs.tree.getCheckedKeys())
            selKey=[]
            selKey = this.$refs.tree.getCheckedKeys()
            },
            setNode(node) {
                if (node.checked) {
                    //选中,递归设置所有父节点选中
                    this.setParentNode(node);
                } else {
                    //取消选中,所有子节点取消选中
                    this.setChildenNode(node);
                }
            },
            setParentNode(node) {
                if (node.parent) {
                    for (const key in node) {
                        if (key === "parent") {
                            node[key].checked = true;
                            this.setParentNode(node[key]);
                        }
                    }
                }
            },
            setChildenNode(node) {
                for (let i = 0; i < node.childNodes.length; i++) {
                    node.childNodes[i].checked = false;
                    this.setChildenNode(node.childNodes[i]);
                }
            },
            init() {
                _this = this
                $.get("/menu/getAllMenus", {}, function (msg) {
                    // _this.data = [{id:'0',name:'系统',children:msg.data}]
                    _this.data = msg.data
                })
                $.get("/menu/getMenusNoTree/" + _this.roleId, {}, function (msg) {
                    // console.log('msg',msg)
                    _this.defaultCheck = []
                    msg.data.map(item => _this.defaultCheck.push(item.menuId))
                    selKey =  _this.defaultCheck
                    // console.log('getMenusNoTree',_this.defaultCheck)
                    // _this.data = msg.data
                })
                $.get("/role/getById/" + _this.roleId, {}, function (msg) {
                    // console.log('role',msg)
                    _this.roleMsg = msg.data
                    _this.roleMsg.flag == '1' ? _this.roleMsg.flag = true : _this.roleMsg.flag = false
                })
            },
            submitForm(formName) {
                _this = this
                if (formName == 'update') {
                    axios({
                        url: "/menu/updateMenu",
                        data: _this.ruleForm,
                        method: 'post',
                        contentType: "application/json",
                    }).then(res => {
                        _this.submitTaskVisible = false
                        var msg = res.data.message
                        this.$message({
                            showClose: true,
                            message: msg,
                            type: msg
                        });
                    })
                } else {
                    axios({
                        url: "/menu/saveMenu",
                        data: _this.ruleForm,
                        method: 'post',
                        contentType: "application/json",
                    }).then(res => {
                        _this.submitTaskVisible = false
                        var msg = res.data.message
                        this.$message({
                            showClose: true,
                            message: msg,
                            type: msg
                        });
                    })
                }

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 点击树节点事件处理
            handleTreeNodeClick(data, node, elem) {
                this.ruleForm = data
                // data.id即为科室id，根据这个科室id触发医生表格数据的查询...
            },


        }
    })

    function hehe() {
        // alert(roleId)
        _this = this
        axios({
            url: "/menu//updateRoleMenu/"+roleId,
            data: {'menuArr':selKey},
            method: 'post',
            contentType: "application/json",
        }).then(res => {

            eleMsg(res.data.code,res.data.message)
            /*
            _this.submitTaskVisible = false
            var msg = res.data.message
       */
        })
    }
</script>

</html>